<!DOCTYPE html>
<html>
	<head>
		<title>项目导航-首页</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style>
			ul.nav-tabs {
				width: 140px;
				margin-top: 20px;
				border-radius: 4px;
				border: 1px solid #ddd;
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
			}

			ul.nav-tabs li {
				margin: 0;
				border-top: 1px solid #ddd;
			}

			ul.nav-tabs li:first-child {
				border-top: none;
			}

			ul.nav-tabs li a {
				margin: 0;
				padding: 8px 16px;
				border-radius: 0;
			}

			ul.nav-tabs li.active a,
			ul.nav-tabs li.active a:hover {
				color: #fff;
				background: #0088cc;
				border: 1px solid #0088cc;
			}

			ul.nav-tabs li:first-child a {
				border-radius: 4px 4px 0 0;
			}

			ul.nav-tabs li:last-child a {
				border-radius: 0 0 4px 4px;
			}

			ul.nav-tabs.affix {
				top: 30px;
			}
		</style>
		<script>
			var baseUrl = "http://47.108.185.28:8889";
			$(function() {
				$("#myNav").affix({
					offset: {
						top: 125
					}
				});

				$.get(baseUrl + "/index", function(result) {
					var projects = result.projects;
					for (x in projects) {
						$("#myNav").append('<li><a href="#pro-' + projects[x].id + '">' + projects[x].name + '</a></li>');
						var envs = projects[x].env;

						var html = '<div class="row"><h2 align="center" id="pro-' + projects[x].id + '">' + projects[x].name +
							'</h2>';
						for (i in envs) {
							html += '<div id="pro-' + projects[x].id + '-env-' + envs[i].id +
								'" class="list-group col-xs-4"><a href="#" class="list-group-item active"><h4  class="list-group-item-heading">' +
								envs[i].name + '</h4></a></div>';
						}
						html += '</div>';
						$("#content").append(html);

						var infos = projects[x].infos;
						for (i in infos) {
							var aHtml = '<a target="_blank" href="' + infos[i].url +
								'" class="list-group-item"><h4 class = "list-group-item-heading">' + infos[i].name + '</h4>';
							aHtml += ' <p style="word-break:break-all" class = "list-group-item-text" >' + (infos[i].remarks == null ?
									"" : infos[i].remarks) +
								'</p></a>';
							$("#pro-" + projects[x].id + "-env-" + infos[i].envId).append(aHtml);
						}
					}
				});
			});
		</script>
	</head>
	<body data-spy="scroll" data-target="#myScrollspy">
		
		<div class="container">
			<div class="row">
				<div class="col-lg-3" id="myScrollspy">
					<ul class="nav nav-tabs nav-stacked" id="myNav"></ul>
				</div>

				<div id="content" class="col-lg-9"></div>
			</div>
	</body>
</html>
